<template>
<div class="box_bg">
    <h2 class="box_tit">
        <i class="icon icon1"></i>组织机构
        <i class="reti"></i>
    </h2>
    <!-- <div class="blank20"></div> -->
                <!-- 查询开始 -->
            <el-form :inline="true" :model="searchFrom" class="demo-form-inline" ref="student" label-width="105px">
            <div class="components_searchs" @keyup.enter="onSubmit">
                <el-form-item label="机构名称：" prop="name">
                  <el-input placeholder="请输入机构名称" v-model="searchFrom.name">
                </el-input>
                </el-form-item>

                <el-form-item label="负责人：" prop="leaderUserName">
                  <el-input placeholder="请输入负责人姓名" v-model="searchFrom.leaderUserName">
                </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="onSubmit">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
                </el-form-item>
            </div>
            </el-form>
            <!-- 查询结束 -->
    <div class="organize">
        <!-- 树结构开始 -->
        <div class="zTree_box">
            <div id="thrTree">
                <ul class="ztree orgTree" id="orgTree"></ul>
            </div>
        </div>
        <!-- 树结构结束 -->
        <!-- 表格结构开始 -->
        <div class="organize_tab">
            <!-- 顶部操作 -->
            <div class="components_btns clearfix">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addItem">添加机构</el-button>
            </div>
            <!-- table表****开始 -->
            <div class="scrollBarX">
                <el-table :data="orgData" border style="width: 100%">
                    <el-table-column :show-overflow-tooltip="true" type="index" align="center" label="序号" width="60"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="name" align="center" label="机构名称"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="remark" align="center" label="机构描述"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="leaderUserName" align="center" label="机构负责人"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="parentName" align="center" label="父机构名称"></el-table-column>
                    <el-table-column prop="" align="center" label="操作" width="250">
                        <template slot-scope="scope">
                            <el-button :data-id="scope.row.id" v-if="!currentState" type="text" size="small" @click="editItem(scope.row)">编辑</el-button>
                            <el-button :data-id="scope.row.userId" v-if="currentState" type="text" size="small" @click="editItem(scope.row)">编辑</el-button>
                            <el-button :data-id="scope.row.id" v-if="scope.row.level != 1" type="text" size="small" @click="DelShow(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 页码 -->
            <div class="paginationBox">
                <el-pagination
                  @current-change="handleCurrentChange"
                  @size-change="handleSizeChange"
                  :current-page.sync="page.currentPage"
                  :page-sizes="[15,30,50,100]"
                  :page-size="page.visiblePages"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="page.totalPages">
                </el-pagination>
            </div>
        </div>
        <!-- 表格结构结束 -->
        <!-- 表格删除--开始 -->
        <div v-show="isDelShow">
            <div id="mask" v-bind:style="{ width: fullWidth + 'px', height: fullHeight + 'px' }"></div>
            <!-- //删除 del  弹层 -->
            <div id="box">
                <strong class="strongs" @click="closeLay"></strong>
                <div class="title">提示框</div>
                <div class="oNav">
                    <div class="div1">
                        <div class="div11" style=""></div>
                        <div class="div12">
                            <h2>是否删除</h2>
                            <span>如果是请点击确定，不是请点击取消退出</span>
                        </div>
                    </div>
                </div>
                <div class="layerbtn">
                    <el-button class="btns" @click='deleteRole()' type="text" size="small">确定</el-button>
                    <el-button  class="btns cancel" @click="closeLay" type="text" size="small">取消</el-button>
                </div>
            </div>
        </div>
        <!-- 表格删除--结束 -->
        <!-- 添加编辑 -->
        <org-edit ref="OrgEdit"></org-edit>
    </div>
</div>
</template>

<script>
import {officesHandleUrl} from '../../../axios/api.js'
import vTable from "../../common/Table.vue";
/*树形插件----开始*/
import vbootstrapStyle from '../../../../static/css/bootstrapStyle.css'
import vZtreeCore from '../../../../static/js/jquery.ztree.core.js'
import vZtreeExcheck from '../../../../static/js/jquery.ztree.excheck.js'
import OrgEdit from './OrgEdit.vue'

export default {
  data() {
    return {
        isDelShow : false,
        searchFrom : {
            leaderUserName:'',
            name:''
        },
        zTreeData : [],
        orgData : [],
        currentID : 0,  //当前操作的id
        spreadId:0,      //当前展开的id
        parentId : '',   //当前操作的父节点ID
        currentState : '机构',  //当前操作的状态
        fullWidth : document.documentElement.clientWidth,
        fullHeight : document.documentElement.clientHeight,
        loading : '',
        page: { // page组件需要数据
            totalPages: null,
            visiblePages: 15,
            currentPage: 0
        },
        tableHead : [
                {
                    marking: "name",
                    cName: "机构名称"
                },
                {
                    marking: "level",
                    cName: "机构级别"
                },
                {
                    marking: "",
                    cName: "操作"
                }
            ]
    };
  },
  beforeMount(){
  },
  mounted() {
    var self = this;
    //机构树展开
    $(".zTree_box").delegate(".zTreeFa,.zTreeC1Click","click",function(){
        $(this).toggleClass("cur").siblings("").slideToggle();
    });
    this.initOrg();
  },
  methods: {
    // 初始化
    initOrg(){
        var self = this;
        //请求组织结构和表单数据
        this.axios.all([this.getzTreeDATA(),this.getTableDATA()]).then(
            this.axios.spread(function (userResp, reposResp) {
            if(userResp.data.success){
                self.zTreeData = userResp.data.data;
                if(self.zTreeData){
                    self.spreadId = self.zTreeData.id;
                    self.parentId = self.zTreeData.parentId;
                    self.DetailsData();
                }else{
                    self.currentID = '';
                    self.spreadId = '';
                    self.parentId = '';
                }
                //获取组织机构数据
                self.zTreeEdit();
                self.DetailsData();
            }else{
                // 操作成功
                self.$message({
                    message: response.data.msg,
                    type:'error',
                    center: true
                });
            }
        }));
    },
    //删除
    DelShow(item){
         this.isDelShow = !this.isDelShow;
         this.currentID = item.id;
    },
    //获取树数据
    getzTreeDATA(){
        console.log(111);
        return this.axios(this.axios.defaults.baseURL + "/offices/treeContainDj")
    },
    //获取组织机构数据
    getTableDATA(){
        return this.axios(this.axios.defaults.baseURL + "/offices")
    },
    //详情信息列表
    DetailsData(){
        let self = this;
        // 请求
        self.axios({
            method: "get",
            url: self.axios.defaults.baseURL + "/offices/getOfficeDataByPagination?parentId=" + self.spreadId,
            params: {
                "leaderUserName": self.searchFrom.leaderUserName,
                "name": self.searchFrom.name,
                "pageNum": self.page.currentPage,
                "pageSize": self.page.visiblePages
            }
        })
        .then(function(response) {
            if(response.data.success){
                self.orgData = response.data.data.list;
                //页码列表
                self.page.totalPages = response.data.data.total;
            }
        })
    },
    // 左侧树结构
    zTreeEdit(){
        let self = this;
        var setting = {
            view: {
                selectedMulti: false
            },
            check: {
                enable: false,
                autoCheckTrigger: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            edit: {
                enable: true
            },
            callback:{
              //点击事件
              onClick: zTreeOnClick,
            }
        };

        self.axios({
            method: "get",
            url: self.axios.defaults.baseURL + "/offices/treeContainDj"
        })
        .then(function(response) {
            var zNodes = response.data.data;
            zNodes.open = true;
            // 初始化树形结构
            $.fn.zTree.init($("#orgTree"), setting, zNodes);
        })

        // 定义点击事件
        function zTreeOnClick(event, treeId, treeNode) {
            var treeObj = $.fn.zTree.getZTreeObj(treeId);
            var node = treeObj.getNodeByTId(treeNode.tId);
            self.spreadId = node.id;
            self.DetailsData();
            // self.updateTreeNode();
        };
    },
    // 更新树节点
    updateTreeNode(item){
        var zTree = $.fn.zTree.getZTreeObj("orgTree");
        var nodes = zTree.getSelectedNodes();
        if(nodes.length>0){
            nodes[0].id = item.id;
            nodes[0].name = item.name;
            nodes[0].remark = item.remark;
            nodes[0].leaderUserId = item.leaderUserId;
            zTree.updateNode(nodes[0])
        }
    },
    // 删除树节点
    delectTreeNode(item){
        var treeObj = $.fn.zTree.getZTreeObj("orgTree");
        var node = treeObj.getNodeByParam("id", item, null);
        if(!node){

        }else{
            treeObj.removeNode(node);
        }
    },
    // 增加树节点
    addTreeNode(item){
        var treeObj = $.fn.zTree.getZTreeObj("orgTree");
        var newNode = item;
        var node = treeObj.getNodeByParam("id", item.parentId, null);
        var parentNode = treeObj.getNodeByTId(node.tId);
        newNode = treeObj.addNodes(parentNode, newNode);
    },
    //刷新机构树
    renovateTree(){

    },
    // 添加机构和用户，跳转
    addItem(){
        this.$refs.OrgEdit.showDialog(this.currentID,'add',this.spreadId);
    },
    // 机构和用户编辑，跳转
    editItem(data){
        this.$refs.OrgEdit.showDialog(data.id,'edit',this.spreadId);
    },
    // 关闭弹层
    closeLay() {
        this.isDelShow = false;
    },
    // 删除
    deleteRole(){
        let self = this;
        let curUrl='';
        if(self.currentState == '机构'){ /*机构*/
            curUrl = officesHandleUrl + self.currentID;
        }else if(self.currentState == '用户'){
            curUrl = officesHandleUrl + "/user/?id=" + self.currentID;
        }
        // self.delectTreeNode(self.currentID)
        self.axios({
            method: "delete",
            url: officesHandleUrl + self.currentID
        })
        .then(function(response) {
            self.isDelShow = false;
            if(response.data.success){
                self.$message({
                    message: response.data.msg,
                    type:'success',
                    center: true
                });
                self.delectTreeNode(self.currentID)
                self.DetailsData()
                // 删除树节点
            }else{
                self.$message({
                    duration:1000,
                    message: response.data.msg,
                    type:'error',
                    center: true
                });
            }
        })
    },
    // 重置
    reset(){
        this.searchFrom.name = '';
        this.searchFrom.leaderUserName = '';
        this.parentId = '';
        this.DetailsData();
    },
    // 搜索
    onSubmit(){
        this.DetailsData();
    },
    // 每页多少条
    handleSizeChange(val) {
        if(isNaN(val)){
            val = 15;
        }
        // 点击分也是 调用列表
        this.page.visiblePages = val;
        this.DetailsData();
    },
    handleCurrentChange(val) {
        if(val < 1){
            val = 1;
        }
        // 点击分也是 调用列表
        this.page.currentPage = val;
        this.DetailsData();
    },
  },
  components: {
    vTable,OrgEdit
  }
};
</script>
<style scoped>
    .organize{
      overflow: hidden;
      position: relative;
      min-height: 600px;
    }
    /* 左侧树结构 */
    .zTree_box {
        position: absolute;
        top: 0;
        left: 0;
        width: 184px;
        overflow-x: auto;
        background: #FFF;
        border-right: 1px dotted #ccc;
    }
    .zTreeF ul {
      display: none;
    }
    .zTree_box li.zTreeC1 {
      padding-left: 18px;
    }
    .zTree_box li a {
      display: block;
      padding-left: 18px;
      background: url("../../../../static/img/wjJ0.gif") no-repeat 0px center;
    }
    .zTree_box li.zTreeC1 a {
      width: 148px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background: url("../../../../static/img/treeTable3.png") no-repeat 0px center;
    }
    .zTree_box li.zTreeC2 a {
      width: 140px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-left: 36px;
      background: url("../../../../static/img/treeTable3.png") no-repeat 18px center;
    }
    .zTree_box li a:hover {
      text-decoration: none;
      color: #24afaf;
    }
    /*****点击更换图标**************/
    .zTree_box li a.cur {
      background: url("../../../../static/img/wjJ.jpg") no-repeat -1px center;
    }
    /***organize_tab**/
    .organize_tab {
      width: 100%;
      padding-left: 204px;
    }
    /**顶部操作**/
    .operate,
    .operate .operate_box {
      overflow: hidden;
    }
    .operate_box {
      float: left;
    }
    .operate_box li {
      float: left;
      margin-right: 5px;
    }
    .operate_box li a {
      display: block;
      font-size: 14px;
      width: 85px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      border-radius: 4px 4px 0 0;
      border: 1px solid #ccc;
      border-bottom: none;
    }
    .operate_box li a.cur {
      background: #24afaf;
      color: #fff;
      border-color: #24afaf;
    }
    .operate .add {
      float: right;
    }
    /**table***/
    table,tr,td{
        border: 1px solid #dadada;
        color: #666;
    }
    table{
        width: 100%;
    }
    td{
        text-align: center;
        vertical-align: middle;
    }
    thead th{
        text-align: center;
        font-weight: bold;
        background: #fbfbfb;
    }
    tbody tr:nth-child(2n) td{
        background: #f9f9f9;
    }

    /***/
    /***********************/
    .bounce-enter-active{
        transition:all 0.4s linear;
        transform:translate3d(0,0,0);
    }
    .bounce-enter{
        transform:translate3d(100%,0,0);
    }
    .bounce-leave-active{
        transition:all 0.4s linear;
        transform:translate3d(100%,0,0);
    }
    .bounce-leave{
        transform:translate3d(0,0,0);
    }
</style>